/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
<template>
  <m-popup ref="popup" :ok-text="$t('Upload')" nameText="" @ok="_ok" @close="close" :disabled="progress === 0 ? false : true">
    <template slot="content">
      <form name="files" enctype="multipart/form-data" method="post">
        <div class="file-update-model" id="file-update-model">
          <div class="update-popup" v-if="dragOver">
            <div class="icon-box">
              <em class="ans el-icon-upload"></em>
            </div>
            <p class="p1">
              <span>{{$t('Drag area upload')}}</span>
            </p>
          </div>
          <m-list-box-f>
            <template slot="name"><strong>*</strong>{{$t('Upload Files')}}</template>
            <template slot="content">
              <div class="file-update-box">
                <template v-if="progress === 0">
                  <input ref="file" name="file" type="file" class="file-update" @change="_onChange">
                  <el-button type="primary" size="mini">{{$t('Upload')}}<em class="el-icon-upload"></em></el-button>
                </template>
                <div class="progress-box" v-if="progress !== 0">
                  <m-progress-bar :value="progress" text-placement="left-right"></m-progress-bar>
                </div>
              </div>
            </template>
          </m-list-box-f>
          <m-list-box-f>
            <template slot="name">{{$t('File Name')}}</template>
            <template slot="content">
              <el-input type="input" v-model="name" :disabled="true" size="small" :placeholder="$t('Please enter name')">
              </el-input>
            </template>
          </m-list-box-f>
        </div>
      </form>
    </template>
  </m-popup>
</template>
<script>
  import io from '@/module/io'
  import i18n from '@/module/i18n'
  import store from '@/conf/home/store'
  import mPopup from '@/module/components/popup/popup'
  import mListBoxF from '@/module/components/listBoxF/listBoxF'
  import mProgressBar from '@/module/components/progressBar/progressBar'

  export default {
    name: 'file-update',
    data () {
      return {
        store,
        // name
        name: '',
        // description
        description: '',
        // progress
        progress: 0,
        // file
        file: '',
        // Whether to drag upload
        dragOver: false
      }
    },
    watch: {
    },
    props: {
      type: String,
      projectCode: String
    },
    methods: {
      /**
       * submit
       */
      _ok () {
        this.$refs.popup.spinnerLoading = true
        if (this._validation()) {
          this._formDataUpdate().then(res => {
            setTimeout(() => {
              this.$refs.popup.spinnerLoading = false
            }, 800)
          }).catch(e => {
            this.$refs.popup.spinnerLoading = false
          })
        } else {
          this.$refs.popup.spinnerLoading = false
        }
      },
      /**
       * validation
       */
      _validation () {
        if (!this.file) {
          this.$message.warning(`${i18n.$t('Please select the file to upload')}`)
          return false
        }
        return true
      },
      /**
       * update file
       */
      _formDataUpdate () {
        return new Promise((resolve, reject) => {
          let self = this
          let formData = new FormData()
          const projectCode = this.projectCode || this.store.state.dag.projectCode
          formData.append('file', this.file)
          io.post(`projects/${projectCode}/process-definition/import`, res => {
            this.$message.success(res.msg)
            resolve()
            self.$emit('onUpdateDefinition')
            this.reset()
          }, e => {
            reject(e)
            self.$emit('closeDefinition')
            this.$message.error(e.msg || '')
            this.reset()
          }, {
            data: formData,
            emulateJSON: false,
            onUploadProgress (progressEvent) {
              // Size has been uploaded
              let loaded = progressEvent.loaded
              // Total attachment size
              let total = progressEvent.total
              self.progress = Math.floor(100 * loaded / total)
              self.$emit('onProgressDefinition', self.progress)
            }
          })
        })
      },
      /**
       * Archive to the top right corner Continue uploading
       */
      _ckArchive () {
        $('.update-file-modal').hide()
        this.$emit('onArchiveDefinition')
      },
      close () {
        this.$emit('closeDefinition')
      },
      reset () {
        this.name = ''
        this.description = ''
        this.progress = 0
        this.file = ''
        this.dragOver = false
      },
      /**
       * Drag and drop upload
       */
      _onDrop (e) {
        let file = e.dataTransfer.files[0]
        this.file = file
        this.name = file.name
        this.dragOver = false
      },
      _onChange () {
        let file = this.$refs.file.files[0]
        this.file = file
        this.name = file.name
        this.$refs.file.value = null
      }
    },
    components: { mPopup, mListBoxF, mProgressBar }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
.file-update-model {
    .tooltip-info {
        position: absolute;
        left: 20px;
        bottom: 26px;
        span {
            font-size: 12px;
            color: #666;
            vertical-align: middle;
        }
        .fa {
            color: #0097e0;
            font-size: 14px;
            vertical-align: middle;
        }
    }
    .hide-archive {
        position: absolute;
        right: 22px;
        top: 17px;
        .fa {
            font-size: 16px;
            color: #333;
            font-weight: normal;
            cursor: pointer;
            &:hover {
                color: #0097e0;
            }
        }
    }
    .file-update-box {
        padding-top: 4px;
        position: relative;
        .file-update {
            width: 70px;
            height: 40px;
            position: absolute;
            left: 0;
            top: 0;
            cursor: pointer;
            filter: alpha(opacity=0);
            -moz-opacity: 0;
            opacity: 0;
        }
        &:hover {
            .v-btn-dashed {
                background-color: transparent;
                border-color: #47c3ff;
                color: #47c3ff;
                cursor: pointer;
            }
        }
        .progress-box {
            width: 200px;
            position: absolute;
            left: 70px;
            top: 14px;
        }
    }
    .update-popup {
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        background: rgba(255, 253, 239, 0.7);
        position: absolute;
        top: 10px;
        left: 10px;
        border-radius: 3px;
        z-index: 1;
        border: 0.18rem dashed #cccccc;
        .icon-box {
            text-align: center;
            margin-top: 96px;
            .fa {
                font-size: 50px;
                color: #2d8cf0;
            }
        }
        .p1 {
            text-align: center;
            font-size: 16px;
            color: #333;
            padding-top: 8px;
        }
    }
}
</style>
